<template>
<view class="container">
  <view  @click="onSelectAddress" class="flow-delivery">
    <view class="detail-location">
      <image :src="$Config.get('imageUrl')+'/order/location.png'" />
    </view>
    <view class="detail-content">
      <block v-if="address && address.detailedAddress">
        <view class="address detail-content__describe">
          <!-- <text class="region" v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text> -->
          <text class="region" >{{ address.detailedAddress }}</text>
        </view>
        <view class="detail-content__title dis-flex">
          <text class="f-30">{{ address.name }}</text>
          <text class="detail-content__title-phone f-28">{{ address.mobile }}</text>
        </view>
      </block>
      <block v-else>
        <view class="detail-content__tips dis-flex">
          <text class="col-6">添加收货地址</text>
        </view>
      </block>
    </view>
    <view class="detail-arrow">
      <image :src="$Config.get('imageUrl')+'/user/right.png'"/>
    </view>
  </view>
  <view class="tips" >
    <view>支持全国一件代发</view>
  </view>
  <view class="content">
    <view class="w-list">
      <view class="w-item" v-for="(item,i) in list" :key="i">
        <view class="title">{{ item.name }}</view>
        <view class="o-list">
            <view class="o-item" v-for="(item1,j) in item.list" :key="j">
              <view class="o-row">
                <view class="orderId">订单号：{{ item1.orderSn }}</view>
                <view class="info">商品数量：  <span class="num">{{ item1.number }}</span></view>
              </view>
              <view class="o-row">
                <view class="info">已提货数量：  <span class="num">{{ item1.fetchNumber }}</span></view>
                <view class="info">申请提货数量：  <span class="num">{{ item1.num }}</span></view>
              </view>
            </view>
        </view>
      </view>
    </view>
    <view class="remark">
      <u--textarea v-model="remark" placeholder="备注信息" ></u--textarea>
    </view>
  </view>
  <view class="bottom"  >
      <view class="btn" @click="submit">提货</view>
  </view>
</view>
</template>

<script>
import store from '@/store'
import storage from '@/utils/storage'
export default {
  data(){
    return {
      list:[],
      remark:'',
      address:{},
      isFirstload:true
    }
  },
  onLoad(options) {
    // console.log('onLoad',options)
    // if(options.list){
    //   this.list = JSON.parse(options.list)
    // }
  },
  onShow(options) {
    this.address = store.getters.orderAddressInfo
    let list = storage.get('warehouseSubmit')
    if(list){
      console.log('list>>',list)
      this.list = list
    }
    store.commit('SET_ORDERADDRESSINFO', {})
    store.commit('SET_ORDERADDRESSID', '')
    console.log('onShow',this.address)
  },
  methods:{
    // 快递配送：选择收货地址
    onSelectAddress() {
      this.$navTo('page_work/address/index', { from: 'warehouseSubmit' })
    },
    submit(){
      const app = this;
      if(!app.address.id){
        app.$toast('请选择收货地址')
        return
      }
      storage.remove('warehouseSubmit')
      let params = {
        addressId:app.address.id,
        remark:app.remark,
        items:[]
      }
      app.list.forEach(item=>{
        item.list.forEach(item1=>{
          params.items.push({
            orderId:item1.orderId,
            goodsId:item1.goodsId,
            productId:item1.productId,
            fetchNumber:item1.num,
            goodsName:item1.goodsName
          })
        })
      })
      app.$request.post('wx/warehouse/fetch',params).then((res) => {
        app.$toast('提货成功')
        setTimeout(()=>{
          uni.navigateBack();
        },1000)
      }).catch(err=>{
        app.$toast(err.errmsg)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  .tips{
    background: #FFF9F9;
    font-size: 24rpx;
    font-weight: 500;
    color: #A8A5A5;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8rpx;
    padding: 24rpx 30rpx;
    margin-bottom: 20rpx;
  }
  // 配送信息
  .flow-delivery {
    background: #FFFFFF;
    border-radius: 16rpx;
    height: 112rpx;
    padding: 0 16rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .detail-location {
      width: 48rpx;
      height:48rpx;
      image{
        width: 100%;
        height:100%;
      }
    }
    .detail-content {
      padding: 0 20rpx;
      flex: 1;
      .detail-content__title-phone {
        margin-left: 10rpx;
      }
      .detail-content__describe{
        font-size: 28rpx;
        font-weight: 500;
        color: #242323;
      }
      .detail-content__tips {
        font-size: 28rpx;
        font-weight: 500;
        color: #242323;
      }
    }
    .detail-content__title {
      margin-bottom: 6rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #666464;
    }
    .detail-arrow{
      width: 24rpx;
      height: 24rpx;
      image{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .content{
    padding: 0 40rpx;
    .w-list{
      margin-top: 40rpx;
      .w-item{
        margin-bottom: 40rpx;
        .title{
          font-size: 28rpx;
          font-weight: bold;
          color: #242323;
        }
        .o-list{
          border-bottom: solid 1px #ECECEC;
          .checkbox-list{
            display:block;
          }
          .o-item{
            margin: 20rpx 0;
          }
          .o-row{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10rpx 0;
            gap: 16rpx;
            .orderId{
              font-size: 26rpx;
              font-weight: 400;
              color: #000000;
            }
            .info{
              font-size: 13px;
              font-weight: 400;
              color: #000000;
              .num{
                font-weight: bold;
                margin-left: 8rpx;
                color:#999999;
              }
            }
          }
        }
      }
    }
    .h-list{
      .h-item{
        border-bottom: solid 1px #ECECEC;
        padding: 0 0 40rpx 0;
        .h-row{
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          font-size: 28rpx;
          font-weight: 500;
          color: #242323;
          padding: 12rpx;
          .label{
            flex-shrink: 0;
          }
          .value{
            margin-left: 140rpx;
            color:#A8A5A5;
          }
        }
        .title{
          font-weight: bold;
        }
      }
    }
  }
  .bottom{
    position: fixed;
    bottom: 100rpx;
    padding: 0 40rpx;
    width: 100%;
    height: 80rpx;
    background: #FFF;
    box-sizing: border-box;
      .btn{
        font-size: 28rpx;
        border-radius: 20rpx;
        font-weight: 500;
        color: #FFF;
        background: #1777FF;
        padding: 14rpx 30rpx;
        flex: 1;
        height: 80rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

  }
}
</style>